<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template
      v-for="col in ['id', 'floorall', 'boxname','boxservicetype','boxservicedesc']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>
          {{ text }}
        </template>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <span v-if="record.editable">
          <a @click="() => save(record.key)">保存</a>
          <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
            <a>取消</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a> | <a @click="() => del(record.id)">删除</a>
        </span>
        <span><addboxmodel></addboxmodel></span>
      </div>

    </template>
  </a-table>
</template>
<script>
  import Addboxmodel from "./Addboxmodel";
  export default {
    components:{
      Addboxmodel
    },
    data() {
      return {
        data:[],
        columns: [
          {
            title: '编号',
            dataIndex: 'id',
            width: '10%',
            scopedSlots: { customRender: 'id' },
          },
          {
            title: '楼层名称',
            dataIndex: 'floorall',
            width: '10%',
            scopedSlots: { customRender: 'floorall' },
          },
          {
            title: '包厢名称',
            dataIndex: 'boxname',
            width: '15%',
            scopedSlots: { customRender: 'boxname' },
          },
          {
            title: '包厢详细名称',
            dataIndex: 'boxservicetype',
            width: '15%',
            scopedSlots: { customRender: 'boxservicetype' },
          },
          {
            title: '包厢功能描述',
            dataIndex: 'boxservicedesc',
            width: '40%',
            scopedSlots: { customRender: 'boxservicedesc' },
          },
          {
            title: '操作',
            dataIndex: 'operation',
            scopedSlots: { customRender: 'operation' },
          },
        ],
        editingKey: '',

      };
    },
    methods: {
      //查询内容
      getfloorinfo()
      {
        this.axios({
          method:"post",
          url:"/ltmjh/boxservice/listpage"
        }).then(({result})=> {
          var all = result.records;
          for (let i= 0;i<all.length;i++){
            this.data.push({
              //'boxname','boxservicetype','boxservicedesc'
              id: all[i].id,
              floorall: all[i].floorall,
              boxname: all[i].boxname,
              boxservicetype: all[i].boxservicetype,
              boxservicedesc: all[i].boxservicedesc,
            })
          }
        });
      },
      handleChange(value, key, column) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          target[column] = value;
          this.data = newData;
        }
      },
      edit(key) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = key;
        if (target) {
          console.log("有数据进行了修改！");
          target.editable = true;
          this.data = newData;
        }
      },
      save(key) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        if (target) {
          console.log("有值进行了保存！");
          //1.做异步交互
          this.axios({
            method:"post",
            url:"/ltmjh/boxservice/update",
            data:target,
          }).then(({result})=>{
            //console.log(result);
            delete target.editable;
            this.data = newData;
            //进行页面刷新
            //this.getfloorinfo();
          });
        }
        this.editingKey = '';
      },
      cancel(key) {
        const newData = [...this.data];
        const target = newData.filter(item => key === item.key)[0];
        this.editingKey = '';
        if (target) {
          delete target.editable;
          this.data = newData;
        }
      },
      //根据id删除对应的信息
      del(key)
      {
        var ids = [key];
        this.axios({
          method:"post",
          url:`/ltmjh/boxservice/delete`,
          data: ids
        }).then((res)=>{
          console.log(res);

          //这里执行强制刷新
          location.reload();
        });
      }
    },
    created() {
      this.getfloorinfo();
    }
  };
</script>
<style scoped>
  .editable-row-operations a {
    margin-right: 8px;
  }
</style>